import React from 'react';
import './ShoppingCar.css'
import { useHistory } from 'react-router-dom';
import ShopCountIcon from "@/components/common/shopCountIcon/ShopCountIcon"

const ShoppingCar=(props)=>{
    const {showPopup,goods}=props
    // console.log(props,'--=--');
    let navigator=useHistory()
    const navigatorTo=()=>{
        navigator.push('/home/shopping')     
    }
    const countAmount = () => {
        let subCount = 0
        goods.map((item) => {
          subCount = subCount + item.count
        })
        // console.log(subCount,'=============');
        return subCount
      }
    return(
        <>
        <div className="shopCar">
            {/* 收藏 */}
            <div className="collect" onClick={()=>navigatorTo()}>
            <svg t="1646636102203" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8414" width="35" height="35"><path d="M848 712H318.4c-25.6 0-46.4-19.2-48-41.6L240 201.6c-1.6-25.6-16-46.4-38.4-57.6l-48-20.8c-12.8-4.8-25.6 0-32 12.8s0 25.6 12.8 32l46.4 20.8c6.4 3.2 11.2 9.6 11.2 17.6l28.8 468.8c3.2 48 46.4 86.4 96 86.4H848c12.8 0 24-11.2 24-24s-11.2-25.6-24-25.6z" p-id="8415" fill="#f98080"></path><path d="M884.8 265.6c-14.4-16-35.2-25.6-57.6-25.6H337.6c-12.8 0-24 11.2-24 24s11.2 24 24 24h489.6c8 0 16 3.2 20.8 9.6 4.8 6.4 8 14.4 8 22.4l-38.4 211.2v1.6c-1.6 14.4-12.8 24-27.2 25.6l-420.8 32c-12.8 1.6-22.4 12.8-22.4 25.6 1.6 12.8 11.2 22.4 24 22.4h1.6l419.2-32c36.8-3.2 67.2-30.4 70.4-67.2l38.4-212.8v-1.6c4.8-20.8-1.6-43.2-16-59.2z" p-id="8416" fill="#f98080"></path><path d="M305.6 856m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z" p-id="8417" fill="#f98080"></path><path d="M753.6 856m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z" p-id="8418" fill="#f98080"></path></svg>
            <ShopCountIcon top="-20px" left="5vw" num={countAmount()}/>
            </div>
            {/* 加购 */}
            <button className='shoppingcar' onClick={()=>{showPopup()}} >加入购物车</button>
            {/* 购买 */}
            <button className='buy'>立即购买</button>
        </div>
        </>
    )
}
export default ShoppingCar